
<template>
  <div class="m50">
    <!-- 转化后 -->
    <el-table
      border
      style="margin-top: 50px"
      :data="transData"
      :span-method="objectSpanMethod"
      :header-cell-style="headFirst"
      :cell-style="headFirst_col"
      :row-style="{ height: 0 + 'px' }"
    >
    <!--  height="60vh"-->
      <el-table-column
        v-for="(item, index) in transTitle"
        :label="item"
        :key="index"
        align="center"
        :width="index == 0 || index == 1 ? '120px' : ''"
      >
        <template slot-scope="scope">{{ scope.row[index] }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
      // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
      originData: [],
      // 第一列标题
      originTitle: [
        "发卡",
        "",
        "",
        "",
        "",
        // "",
        "退卡",
        "",
        "",
        "",
        "充值",
        "",
        "",
        "",
        "",
        "取款",
        "",
        "补卡",
        "",
        "",
        "损益",
        "",
        "坏账",
        "",
        "储蓄消费",
        "记次消费",
        "营业总收入",
        "",
      ],
      // 第二列标题
      originTitle2: [
        // 发卡
        "人次",
        "收工本费",
        "收押金",
        "收管理费",
        "预存款",
        // "退卡",
        "人次",
        "退款",
        "退押金",
        "退管理费",
        // 充值
        "人次",
        "卡务中心",
        "充值机",
        "手机充值",
        "无卡现金充值",
        // "取款",
        "人次",
        "金额",
        // 补卡
        "人次",
        "收工本费",
        "收押金",
        // "损益",
        "人次",
        "金额",
        // "坏账",
        "人次",
        "金额",
        // "储蓄消费",
        "人次",
        // "记次消费",
        "人次",
        // "营业总收入",
        "人次",
        "金额",
      ], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transTitle: ["栏目", ""],
      // 最终渲染数据
      transData: [],
    };
  },
  created() {
    // 获取数据
    this.getList();
    let titleArr = [
      "cardUserCount",
      "cardBalance",
      "cardCostBalance",
      "cardCashBalance",
      "cardManageBalance",
      "returnUserCount",
      "returnRealityBalance",
      "returnCashBalance",
      "returnManageBalance",
      "rechargeUserCount",

      "localAdjustAmount",
      "machineAdjustAmount",
      "appAdjustAmount",
      "platformAdjustAmount",
      
      "drawUserCount",
      "drawExpenditure",
      "replacementUserCount",
      "replacementCostBalance",
      "replacementCashBalance",
      "profitLossUserCount",
      "profitLossBalance",
      "badDebUserCount",
      "badDebCashBalance",
      "successExpenditureCount",
      "timesExpenditureCount",
      "expenditureCount",
      "expenditureBalance",
    ];
    // 数组按矩阵思路, 变成转置矩阵
    let matrixData = this.originData.map((row) => {
      let arr = [];
      for (let key in row) {
        for (let i = 0; i < titleArr.length; i++) {
          if (key == titleArr[i]) {
            arr[i] = row[key];
          }
        }
      }
      return arr;
    });
    // 加入标题拼接最终的数据
    this.transData = matrixData[0].map((col, i) => {
      return [
        this.originTitle[i],
        this.originTitle2[i],
        ...matrixData.map((row) => {
          return row[i];
        }),
      ];
    });
  },
  methods: {
    // 请求拿到数据
    getList() {
      let obj = {
        messageCode: 200,
        errorMessage: "",
        messageContent: [
          {
            groupGuid: "6eb5f2c9-d8d1-4357-8a1e-047224a5233b",
            groupName: "老师1",
            cardUserCount: 1,
            cardBalance: 2,
            cardCostBalance: 3,
            cardManageBalance: 5,
            cardCashBalance: 4,
            returnUserCount: 6,
            returnRealityBalance: 7,
            returnCashBalance: 8,
            returnManageBalance: 9,
            rechargeUserCount: 10,
            localAdjustAmount: 11,
            appAdjustAmount: 12,
            machineAdjustAmount: 13,
            platformAdjustAmount: 14,
            drawUserCount: 15,
            drawExpenditure: 16,
            replacementUserCount: 17,
            replacementCostBalance: 18,
            replacementCashBalance: 19,
            profitLossUserCount: 20,
            profitLossBalance: 21,
            badDebUserCount: 22,
            badDebCashBalance: 23,
            successExpenditureCount: 24,
            timesExpenditureCount: 25,
            expenditureCount: "expenditureCount",
            expenditureBalance: "expenditureBalance",
          },
                  {
            "groupGuid":"6eb5f2c9-d8d1-4357-8a1e-047224a5233b",
            "groupName":"老师",
            "cardUserCount":0,
            "cardBalance":0,
            "cardCostBalance":0,
            "cardCashBalance":0,
            "cardManageBalance":0,
            "returnUserCount":0,
            "returnRealityBalance":0,
            "returnCashBalance":0,
            "returnManageBalance":0,
            "rechargeUserCount":16,
            "localAdjustAmount":0,
            "appAdjustAmount":281310,
            "machineAdjustAmount":0,
            "platformAdjustAmount":0,
            "drawUserCount":0,
            "drawExpenditure":0,
            "replacementUserCount":0,
            "replacementCostBalance":0,
            "replacementCashBalance":0,
            "profitLossUserCount":0,
            "profitLossBalance":0,
            "badDebUserCount":0,
            "badDebCashBalance":0,
            "successExpenditureCount":0,
            "timesExpenditureCount":0,
            "expenditureCount":0,
            "expenditureBalance":0
        },
        ],
      };
      this.originData = [];
      this.transTitle = ["栏目", ""];
      obj.messageContent.forEach((item, index) => {
        console.log(item, index);
        delete obj.messageContent[index].groupGuid;
        // delete obj.messageContent[index].cardBalance;
        this.transTitle.push(item.groupName);
        delete obj.messageContent[index].groupName;
        item.appAdjustAmount = this.amountyua(item.appAdjustAmount);
        this.originData.push(item);
      });
      console.log(this.originData);
    },
    // 列合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 5,
            colspan: 1,
          };
        } else if (rowIndex === 5) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else if (rowIndex === 9) {
          return {
            rowspan: 5,
            colspan: 1,
          };
        } else if (rowIndex === 14) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else if (rowIndex === 16) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else if (rowIndex === 19) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else if (rowIndex === 21) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else if (rowIndex === 23) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex === 24) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex === 25) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },
    // 表头样式
    headFirst({ row, colunm, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return { background: "#45c2b5", color: "#fff" };
      } else {
        return "";
      }
    },
    // 列样式
    headFirst_col({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 指定列号
        return {
          fontWeight: "bold",
          fontSize: "12px",
          padding: "3px",
          color: "#000",
        };
      } else {
        return { padding: "3px" };
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    click() {
      console.log(this.transData);
      let arr = JSON.parse(JSON.stringify(this.transData));
      let obj = arr.map((item, index) => {
        return {
          ...item,
        };
      });
      console.log(Object.keys(obj[0]));
      const nowtime = this.getimeto();
      require.ensure([], () => {
        let multiHeader = [];
        let merges = [
          "A1:B1",
          "A2:A6",
          "A7:A10",
          "A11:A15",
          "A16:A17",
          "A18:A20",
          "A21:A22",
          "A23:A24",
          "A27:A28",
        ];
        const tHeader = this.transTitle;
        const filterValArr = [];
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const filterVal = Object.keys(obj[0]);
        const list = obj;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: "学生减款表" + this.getimeto(),
        });
      });

      console.log(obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.m50 {
  margin: 50px;
}
</style>